<template>
  <div>
    <svg v-if="false" width="1660" height="849" xmlns="http://www.w3.org/2000/svg">
      <!-- Created with Method Draw - http://github.com/duopixel/Method-Draw/ -->
      <g>
        <title>background</title>
        <rect fill="#fff" id="canvas_background" name="canvas_background" height="851" width="1662" y="-1" x="-1" />
        <g display="none" overflow="visible" y="0" x="0" height="100%" width="100%" id="canvasGrid" name="canvasGrid">
          <rect fill="url(#gridpattern)" stroke-width="0" y="0" x="0" height="100%" width="100%" />
        </g>
      </g>
      <g>
        <title>Layer 1</title>
        <rect name="svg_2" id="svg_2" height="166" width="163" y="368.953125" x="361.5" stroke-width="1.5" stroke="#000"
          fill="#f7af6c" @click="test1" />
        <path name="svg_3" id="svg_3"
          d="m327.857471,367.86645l113.000019,-131.999987l113.000019,131.999987l-226.000038,0z" stroke-width="1.5"
          stroke="#000" fill="#f7af6c" @click="test2" />
        <path id="svg_6" name="svg_6"
          d="m647.290429,539.674359c-10.378368,-0.931722 -0.240835,-15.339057 -4.155438,-22.011514c-0.039569,-9.822009 -4.144981,-19.49459 -2.80916,-29.26438c8.167409,-17.224524 1.361373,-36.036224 -0.429505,-53.778485c-0.809639,-3.917275 -0.785838,-13.97914 -2.798463,-5.033643c-5.573642,15.082584 -0.12909,33.725388 -4.896202,49.000717c-7.967425,8.504755 -13.985658,-4.988352 -6.379897,-10.162333c8.885793,-12.423455 6.738166,-29.157081 7.036967,-44.647475c-0.382476,-9.794253 4.041526,-22.094013 17.134313,-22.373255c11.201018,-0.752392 21.807468,3.9883 33.107357,3.401831c32.956596,0.456098 66.238164,0.710532 98.77776,-4.623319c16.242143,-3.324443 32.412304,2.544607 48.679888,0.164269c9.14164,0.876898 13.977894,-2.919533 9.948835,-10.046705c6.809309,-4.172274 12.048658,7.912217 15.073045,-2.851367c10.966001,-6.71227 12.494392,13.10361 24.638842,7.50716c14.649008,1.68603 -6.36529,13.324268 5.899969,19.149754c7.415561,5.081736 18.771341,17.669394 4.01897,21.297362c-12.683532,-0.79118 -25.395983,-0.052228 -38.087243,0.493257c-5.873965,8.711563 -18.092527,15.245796 -16.753774,26.661198c-1.01463,13.618137 -11.755279,27.044371 -26.457993,31.273804c-6.28333,-1.104795 -9.024464,0.699697 -8.23941,6.415649c-3.246356,7.4691 -3.818562,15.347222 -3.43343,23.29243c-0.960906,4.380131 1.081347,7.786778 3.985368,11.160575c-3.415245,5.255521 -22.982725,2.142514 -15.569212,-7.800087c1.895845,-13.040776 -0.334893,-26.135688 -1.997059,-39.101516c-7.798074,-4.926607 -17.251904,-3.122836 -25.144469,0.836045c-17.41172,5.671808 -37.565782,11.042121 -55.424934,3.762843c-9.956655,-2.4697 -24.974584,-4.306739 -32.37492,3.152402c-3.329846,11.249249 -2.439677,23.330473 -5.278143,34.747373c-0.047748,5.968994 6.345353,11.093752 -4.485545,9.427902c-4.526331,0.092368 -9.064891,0.218938 -13.586547,-0.050492l0.000028,0zm9.24184,-12.703499c1.781343,-5.345907 -2.569275,-18.927721 -2.942179,-6.259685c-1.481795,4.019258 0.402698,23.323577 2.61646,10.508274c0.140045,-1.414119 0.239461,-2.831178 0.325718,-4.248589z"
          stroke-width="1.5" stroke="#000" fill="#ff0000" @click="test3" />
        <path id="svg_7" name="svg_7"
          d="m1218.528428,401.141797l-30.588895,-32.317305l0,-77.183687l-26.223334,0l0,49.478617l-61.187779,-64.645164l-118.000008,124.667538l28.091434,-0.707139l0,126.039599l178.568417,0l0,-125.33246l29.340165,0zm-118.000008,107.305694l-58.270746,0l0,-73.880187l58.270746,0l0,73.880187zm56.612432,-31.662937l-38.291063,0l0,-42.660531l38.291063,0l0,42.660531z"
          stroke-opacity="null" stroke-width="1.5" stroke="#000" fill="#56aaff" @click="test1" />
        <path id="svg_8" name="svg_8"
          d="m336.652059,113.139349c0.163014,-1.466866 0.257391,-2.948776 0.257391,-4.445732c0,-25.967285 -24.006027,-47.014927 -53.623184,-47.014927c-22.985042,0 -42.5382,12.705314 -50.165562,30.533374c-5.053449,-4.859463 -12.260405,-7.966209 -20.351071,-7.966209c-15.254724,0 -27.618085,10.839762 -27.618085,24.214568c0,1.579702 0.197333,3.121791 0.531942,4.611224c-20.351071,2.941254 -35.923244,18.324538 -35.923244,36.995106c0,20.776837 19.20997,37.611942 42.898548,37.611942l136.202889,0c23.697158,0 42.898548,-16.835105 42.898548,-37.611942c0.00858,-18.437374 -15.143187,-33.707822 -35.108171,-36.927404z"
          stroke-opacity="null" stroke-width="1.5" stroke="#000" fill="#ffffff" @click="test1" />
        <path transform="rotate(2.1070942878723145 847.2075195312497,149.30496215820258) " id="svg_9" name="svg_9"
          d="m843.859143,185.711441c4.50531,1.397322 12.654489,-5.128255 4.444504,-5.510306c-5.556876,-3.240432 12.319139,-0.927805 5.034489,-7.7714c-7.793455,-1.572078 -13.885867,-7.067907 -16.599434,-14.098321c-3.170076,-7.573289 -13.489105,-5.492648 -20.25001,-7.680873c-13.49181,-2.231595 -26.968366,-4.869349 -40.690441,-5.520498c-4.56357,4.764412 -6.715658,14.999705 -14.836527,14.600575c-8.117932,-3.78423 0.342852,-13.284365 -2.089409,-18.711603c-4.768345,-1.488523 -3.85871,-4.376687 0.791615,-4.742253c7.094964,-4.536631 1.191962,-13.306132 -0.35173,-19.282129c-3.755417,-5.675919 4.286426,-10.680395 7.350712,-3.982976c3.904629,6.985049 6.171329,14.654432 9.27267,21.977419c0.967706,4.697642 8.140742,2.034328 11.897573,3.435731c15.841813,1.579005 31.698709,3.166219 47.625809,3.777076c7.97851,-3.189199 16.445559,-5.861526 25.269472,-4.728241c6.170987,1.732567 9.656167,-0.402696 9.382026,-6.314201c3.503523,-8.514743 -8.585217,-4.722606 -14.035502,-5.975861c-21.743756,-0.97974 -43.551763,-1.276399 -65.28759,-0.072314c-4.825657,-1.11565 6.373626,-1.014352 8.073053,-1.270822c22.934905,-1.122498 45.918434,-0.570321 68.859286,-1.524916c6.615124,-2.260584 13.180842,1.764691 19.925318,1.082976c17.011364,0.645691 34.037993,0.870467 51.062481,0.919432c-4.81276,3.31427 -13.790455,0.032713 -20.156592,0.853745c-12.792774,-0.363889 -25.666637,-0.705205 -38.384172,0.908163c-4.953357,4.433752 -2.352959,13.901905 3.845206,16.107277c6.316516,3.146203 12.798073,5.904193 18.548491,9.643216c3.63435,6.412953 13.906579,11.793687 10.876776,19.869116c-3.472227,6.68246 -16.062931,2.480712 -19.250842,4.360004c2.358484,3.872149 10.503044,4.263769 11.967819,5.679422c-8.030676,2.14304 -0.373316,6.719187 4.194238,5.266625c5.636393,1.236351 -5.731028,2.104732 -7.607715,1.69821c-9.131112,0.068046 -18.256661,-0.295911 -27.385484,-0.41223c8.820951,-0.36466 17.667049,-0.357308 26.46092,-1.167585c-2.051205,-7.813421 -12.888615,-3.991592 -19.13311,-5.347669c-3.04412,-1.445896 -13.078228,0.388303 -7.991542,3.241458c2.838238,-1.184699 9.775368,-0.051646 3.457096,1.276774c-11.427786,0.341832 -22.898549,0.494805 -34.289452,-0.583013l0,-0.000006zm27.81465,-3.247052c-3.483234,-4.668743 -15.520597,-3.771696 -17.711225,0.480775c4.267164,3.180923 13.073027,2.07394 17.613488,0.147326l0.097737,-0.628107l0,0l0,0.000006zm25.17844,-2.719041c-5.134098,-3.356178 -14.530277,-3.726569 -19.142814,-0.998231c5.791791,2.566092 12.895939,1.521764 19.142814,0.998231zm-25.367735,-1.537392c5.45529,-4.313085 -9.624877,-3.510347 -12.958623,-3.290536c-8.244867,3.474584 3.34479,4.434183 6.807228,3.864667c2.062867,-0.012601 4.13427,-0.156011 6.151401,-0.574131l-0.000006,0z"
          stroke-opacity="null" stroke-width="1.5" stroke="#000" fill="#4c4c4c" @click="test3" />
        <path id="svg_10" name="svg_10"
          d="m317.544815,497.585888c-3.680525,-5.02906 -8.183384,-9.100609 -12.700073,-11.948815c-5.270266,2.919428 -11.689165,4.697143 -18.687013,4.697143c-7.011588,0 -13.43972,-1.78118 -18.700694,-4.697143c-4.516678,2.848207 -9.024138,6.919755 -12.713696,11.948815c-8.564753,11.676035 -9.506666,23.652668 -2.10912,26.75805c3.312933,1.398875 6.786496,0.356234 10.375079,-2.259127c-0.629487,2.651812 -0.997094,5.526032 -0.997094,8.532387c0,13.356463 6.86007,24.175755 15.314361,24.175755c5.095685,0 7.618201,-3.939547 8.831164,-9.971293c1.208489,6.031746 3.730983,9.971293 8.808201,9.971293c8.468184,0 15.328318,-10.819292 15.328318,-24.175755c0,-3.006358 -0.367729,-5.880575 -1.010898,-8.532387c3.59769,2.615361 7.066684,3.658002 10.388814,2.259127c7.392993,-3.105382 6.437171,-15.082019 -2.127344,-26.75805l-0.000005,0zm-31.396129,-11.808069c14.225341,0 25.762835,-8.727005 25.762835,-19.492421s-11.537494,-19.492445 -25.762835,-19.492445c-14.23018,0 -25.776786,8.728741 -25.776786,19.492445s11.546606,19.492421 25.776786,19.492421z"
          stroke-opacity="null" stroke-width="1.5" stroke="#000" fill="#ffffff" @click="test2" />
        <path id="svg_13" name="svg_13"
          d="m1217.675158,137.769559c0,0 4.483746,2.134283 4.932128,3.734973c0.448306,1.6006 21.073658,-4.80198 25.557403,-8.536953c4.483746,-3.734973 14.796383,-3.321124 14.796383,-10.137732c0,-2.134283 -2.045658,-7.669998 1.793529,-5.869256c0.746617,0.350339 0.896841,3.20147 0.896841,3.20147c0,0 -0.784631,-2.634549 -1.933677,-1.900903c-0.56105,0.358334 0.813637,4.774761 1.485218,6.16938c0,0 37.535711,-6.929346 45.734373,-4.268476c3.288136,1.067007 14.348154,2.667786 14.049156,8.359088c0,0 -15.244079,6.218787 -17.636137,28.990372c-0.298845,2.845561 -19.554166,-3.622775 -32.28306,25.077355c-2.839754,6.40267 -3.587058,4.090522 -4.483822,3.734973c-0.896764,-0.355729 -18.831823,-13.694931 -33.628206,11.738243c0,0 0.747304,-0.177775 0.896764,0.533593c0.149461,0.711458 7.323499,-1.956329 7.622421,2.667966c0,0 -3.342714,-1.804156 -2.595411,-0.025422c0.747227,1.778464 0.368232,3.817707 -0.094806,2.693029c-0.088699,-0.215414 -1.94299,-2.134193 -1.345223,-0.533414c0.597843,1.6006 -2.872119,5.273231 -3.055625,4.734607c-0.730281,-2.143715 1.710554,-4.556832 -2.773191,-6.8688c-4.483822,-2.312148 -16.88891,3.20129 -23.315569,20.275285c0,0 -0.448382,0.889232 -1.345147,-0.533593c-0.896764,-1.422825 -7.174039,-20.453239 -20.17697,-21.342472c0,0 -0.597843,2.667786 -2.690217,3.20138c-2.09245,0.533593 -1.643992,8.714727 -2.690293,5.869166c-1.046225,-2.845651 -0.830049,0.550122 -0.896764,0c-0.242435,-2.001334 0.766769,-5.12528 -2.241911,-3.734973c-0.394109,0.182086 -0.597843,3.023605 -1.34507,1.60078c-0.747304,-1.422825 0.922183,-3.970778 1.968332,-5.037875c1.046225,-1.067097 -3.486374,-1.184954 -1.51995,-2.432071c1.990393,-1.262298 7.622345,2.845741 5.38051,-1.6006c-2.241911,-4.446431 -15.129197,-25.213538 -33.628206,-11.204829c-3.288136,2.489922 -2.241911,-0.533683 -4.03544,-3.201559c-1.793452,-2.667697 -14.360978,-28.078862 -31.386296,-25.077355c-4.03544,0.711547 -2.241911,-3.734883 -3.586981,-5.335573c-1.345223,-1.60069 -9.465872,-29.597895 -17.486677,-27.211638c-1.793529,0.533414 -0.50693,-9.141871 14.796383,-8.003449c2.391372,0.177775 0.896764,-2.134283 3.587058,-1.60078c2.690217,0.533683 35.870041,6.04712 39.457022,7.469946c3.587058,1.422825 7.622421,2.775673 7.622421,-5.869166c0,-0.166815 -0.58853,-0.600247 -1.793529,0.533503c-0.532425,-0.56692 3.885979,-3.557109 3.138675,2.134283c-0.747304,5.691302 -2.380761,4.161488 0.448382,5.869076c4.005975,2.417878 7.179916,6.611885 13.451237,6.936443c3.437597,0.177864 20.772294,10.304368 24.660715,9.070546c2.241911,-0.711458 5.231049,-2.312148 4.035363,-3.20147c-1.19561,-0.889142 -5.231049,-6.580534 -4.932128,-9.604049c0.298921,-3.023515 1.195686,-5.335573 0,-6.402759c-1.195686,-1.067097 1.345147,-4.090612 3.587058,-0.533593c2.241835,3.557109 2.241835,6.224895 4.035363,6.402759c1.793529,0.177954 5.081665,-0.889142 6.277274,0c0,0 5.231126,-8.892592 8.070727,-7.469946c2.839754,1.422915 0.597843,3.379244 0.896764,4.80207c0.298921,1.422825 -2.989138,12.094241 -6.277198,11.738422z"
          stroke-opacity="null" stroke-width="1.5" stroke="#000" fill="#4c4c4c" @click="test3" />
      </g>
    </svg>
    <div ref="mapLine" style="width: 80vw;height:80vh;"></div>
  </div>
</template>

<script>
  import $ from 'jquery';
  import 'echarts-gl';
  import * as echarts from 'echarts';
  import childdraw from './utils/childDraw.js'
  import seat from './utils/seat.js'
  import cow from './utils/cow.js'
  require("echarts/theme/macarons");
  export default {
    name: 'ellipse',
    data() {
      return {
        purle: {
          cx: 240,
          cy: 100,
          rx: 220,
          ry: 30
        },
        lime: {

        },
        yellow: {

        }
      }
    },
    mounted() {
      this.init();
    },
    methods: {
      init() {
        let svgXML = childdraw;
        echarts.registerMap("Beef_cuts_France", {
          svg: svgXML
        });
        let chartLine = echarts.init(this.$refs.mapLine);
        chartLine.setOption({
          tooltip: {},
          series: [{
            name: 'French Beef Cuts',
            type: 'map',
            map: 'Beef_cuts_France',
            roam: true,
            emphasis: {
              label: {
                show: true
              }
            },
            selectedMode: false
          }],
          data: [{
              name: 'Queue',
              value: 15
            },
            {
              name: 'Langue',
              value: 35
            },
            {
              name: 'Plat de joue',
              value: 15
            },
            {
              name: 'Gros bout de poitrine',
              value: 25
            },
            {
              name: 'Jumeau à pot-au-feu',
              value: 45
            },
            {
              name: 'Onglet',
              value: 85
            },
            {
              name: 'Plat de tranche',
              value: 25
            },
            {
              name: 'Araignée',
              value: 15
            },
            {
              name: 'Gîte à la noix',
              value: 55
            },
            {
              name: 'Bavette d\'aloyau',
              value: 25
            },
            {
              name: 'Tende de tranche',
              value: 65
            },
            {
              name: 'Rond de gîte',
              value: 45
            },
            {
              name: 'Bavettede de flanchet',
              value: 85
            },
            {
              name: 'Flanchet',
              value: 35
            },
            {
              name: 'Hampe',
              value: 75
            },
            {
              name: 'Plat de côtes',
              value: 65
            },
            {
              name: 'Tendron Milieu de poitrine',
              value: 65
            },
            {
              name: 'Macreuse à pot-au-feu',
              value: 85
            },
            {
              name: 'Rumsteck',
              value: 75
            },
            {
              name: 'Faux-filet',
              value: 65
            },
            {
              name: 'Côtes Entrecôtes',
              value: 55
            },
            {
              name: 'Basses côtes',
              value: 45
            },
            {
              name: 'Collier',
              value: 85
            },
            {
              name: 'Jumeau à biftek',
              value: 15
            },
            {
              name: 'Paleron',
              value: 65
            },
            {
              name: 'Macreuse à bifteck',
              value: 45
            },
            {
              name: 'Gîte',
              value: 85
            },
            {
              name: 'Aiguillette baronne',
              value: 65
            },
            {
              name: 'Filet',
              value: 95
            },
          ]
        });
        //点击事件,根据点击某个省份计算出这个省份的数据
        chartLine.on('click', function(params) {
          console.log(params);
          //逻辑控制

        });
      },
      init2() {
        var ROOT_PATH = 'https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples';
        var chartDom = this.$refs.mapLine;
        var myChart = echarts.init(chartDom);
        var option;
        
        $.get(ROOT_PATH + '/data/asset/geo/Beef_cuts_France.svg', function (svg) {
            alert(svg);
            echarts.registerMap('Beef_cuts_France', { svg: svg });
        
            option = {
                tooltip: {
                },
                series: [{
                    name: 'French Beef Cuts',
                    type: 'map',
                    map: 'Beef_cuts_France',
                    roam: true,
                    emphasis: {
                        label: {
                            show: false
                        }
                    },
                    selectedMode: false,
                    data: [
                        { name: 'Queue', value: 15 },
                        { name: 'Langue', value: 35 },
                        { name: 'Plat de joue', value: 15 },
                        { name: 'Gros bout de poitrine', value: 25 },
                        { name: 'Jumeau à pot-au-feu', value: 45 },
                        { name: 'Onglet', value: 85 },
                        { name: 'Plat de tranche', value: 25 },
                        { name: 'Araignée', value: 15 },
                        { name: 'Gîte à la noix', value: 55 },
                        { name: 'Bavette d\'aloyau', value: 25 },
                        { name: 'Tende de tranche', value: 65 },
                        { name: 'Rond de gîte', value: 45 },
                        { name: 'Bavettede de flanchet', value: 85 },
                        { name: 'Flanchet', value: 35 },
                        { name: 'Hampe', value: 75 },
                        { name: 'Plat de côtes', value: 65 },
                        { name: 'Tendron Milieu de poitrine', value: 65 },
                        { name: 'Macreuse à pot-au-feu', value: 85 },
                        { name: 'Rumsteck', value: 75 },
                        { name: 'Faux-filet', value: 65 },
                        { name: 'Côtes Entrecôtes', value: 55 },
                        { name: 'Basses côtes', value: 45 },
                        { name: 'Collier', value: 85 },
                        { name: 'Jumeau à biftek', value: 15 },
                        { name: 'Paleron', value: 65 },
                        { name: 'Macreuse à bifteck', value: 45 },
                        { name: 'Gîte', value: 85 },
                        { name: 'Aiguillette baronne', value: 65 },
                        { name: 'Filet', value: 95 },
                    ]
                }]
            };
        
            myChart.setOption(option);
        
        });
        
        option && myChart.setOption(option);
      },
      test1() {
        alert('111')
      },
      test2() {
        alert('111')
      },
      test3() {
        alert('111')
      }
    }
  }
</script>

<style scoped rel="stylesheet/scss" lang="scss">
  rect:hover {
    opacity: 0.5;
  }

  path:hover {
    opacity: 0.5;
  }
</style>
